<template>
  <el-container>
    <!--设置为页面的头部-->
    <el-header class="header_container">
      <div class="left-title">
        <el-button v-for="(item, index) in titleArr" link :key="index" :href="item.href">
          {{ item.name }}
        </el-button>
      </div>

      <div class="toolbar">
        <el-button link type="primary">调研</el-button>
        <el-dropdown class="setting-bar">
          设置
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>搜索设置</el-dropdown-item>
              <el-dropdown-item>首页设置</el-dropdown-item>
              <el-dropdown-item>高级搜索</el-dropdown-item>
              <el-dropdown-item>关闭预测</el-dropdown-item>
              <el-dropdown-item>隐私设置</el-dropdown-item>
              <el-dropdown-item>关闭热搜</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button type="primary" size="small">登录</el-button>
      </div>
    </el-header>

    <!--主体内容区域-->
    <el-main class="main_container">
      <!--设置logo图标-->
      <div class="logo-container">
        <el-image :src="logoImage" style="width: 270px; height: 129px" />
      </div>

      <div class="search_div">
        <!--设置输入框-->
        <div class="input_area">
          <el-input
            v-model="searchText"
            :placeholder="hot"
            size="large"
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button type="primary" @click="handleSearch">百度一下</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <!--AI功能区域-->
      <div class="ai-features">
        <el-button v-for="(feature, index) in aiFeatures" :key="index" round>
          <el-icon>
            <component :is="feature.icon" />
          </el-icon>
          <span>{{ feature.name }}</span>
        </el-button>
      </div>

      <!--热点新闻区域-->
      <div class="hot-news">
        <div class="hot-news-header">
          <h3>百度热搜</h3>
          <el-button link>换一换</el-button>
        </div>
        <div class="news-list">
          <div v-for="(news, index) in hotNews" :key="index" class="news-item">
            <span class="news-index">{{ index * 2 + 2 }}</span>
            <span class="news-title">{{ news.title }}</span>
          </div>
        </div>
      </div>
    </el-main>

    <!--底部导航栏-->
    <el-footer class="footer_container">
      <a href="#">关于百度</a>
      <a href="#">About Baidu</a>
      <a href="#">使用百度前必读</a>
      <a href="#">帮助中心</a>
      <a href="#">企业推广</a>
      <span>京ICP证030173号</span>
      <a href="#">京公网安备11000002000001号</a>
    </el-footer>
  </el-container>
</template>

<!--setup属性表示在此处使用组合式API的语法,
使用setup属性后，script标签内部不能使用选项式的写法-->
<script setup>
import { ElButton, ElMessage } from 'element-plus'
import { Edit, Document } from '@element-plus/icons-vue'
import { reactive, ref, markRaw } from 'vue'

const logoImage = ref('https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png')

// 搜索文本
const searchText = ref('')

// 设定标题数组，如果需要让本数组中的数据能够被修改，必须将其设定为响应式数据
// 使用vue中的 ref 或 reactive 两种函数进行设置
let titleArr = ref([
  {
    name: '新闻',
    href: '#',
  },
  {
    name: 'hao123',
    href: '#',
  },
  {
    name: '地图',
    href: '#',
  },
  {
    name: '贴吧',
    href: '#',
  },
  {
    name: '视频',
    href: '#',
  },
  {
    name: '图片',
    href: '#',
  },
  {
    name: '网盘',
    href: '#',
  },
  {
    name: '文库',
    href: '#',
  },
  {
    name: 'AI+',
    href: '#',
  },
  {
    name: '更多',
    href: '#',
  },
])

// 预设一个数组，用于存储搜索框内的热点提示
const hot = ref('合作方曝王一博有严重高反')

// AI 功能区数据
const aiFeatures = reactive([
  { name: 'AI写作', icon: markRaw(Edit) },
  { name: 'AI PPT', icon: markRaw(Document) },
])

// 热点新闻数据
const hotNews = reactive([
  { title: '天坑溶洞垃圾10层' },
  { title: '“横竖”都是世界第一' },
  { title: '取消额外假公司已' },
  { title: '坠机身亡主播“唐飞' },
])

// 搜索处理函数
const handleSearch = () => {
  if (searchText.value.trim()) {
    ElMessage.success(`搜索: ${searchText.value}`)
  } else {
    ElMessage.warning('请输入搜索内容')
  }
}
</script>

<style scoped>
/* 头部布局美化 */
.header_container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  align-items: center;
  height: 60px;
}

/* 左侧标题区域 */
.header_container .left-title {
  display: flex;
  gap: 15px;
}

.header_container .left-title .el-button {
  color: #333;
  font-size: 13px;
}

.header_container .left-title .el-button:hover {
  color: #315efb;
}

/* 工具栏区域 */
.header_container .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header_container .toolbar .el-button {
  font-size: 13px;
}

/* 主体内容区域 */
.main_container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;
  padding-top: 50px;
  flex-grow: 1; /* 占据剩余空间 */
}

/* Logo容器 */
.logo-container {
  margin-bottom: 20px;
}

/* 搜索区域 */
.search_div {
  width: 700px;
  margin-bottom: 20px;
}

.search-input :deep(.el-input-group__prepend) {
  background: #fff;
  color: #333;
  font-size: 14px;
  padding: 0 20px;
}

.search-input :deep(.el-input__inner) {
  height: 54px;
  font-size: 16px;
}

.search-input :deep(.el-input-group__append) {
  background: #4e6ef2;
  border: none;
}

.search-input :deep(.el-input-group__append .el-button) {
  color: white;
  font-size: 16px;
  padding: 0 30px;
}

/* AI功能区域 */
.ai-features {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.ai-features .el-button {
  background: #f5f5f5;
  border: none;
  color: #333;
}

/* 热点新闻区域 */
.hot-news {
  width: 700px;
}

.hot-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.hot-news h3 {
  font-size: 16px;
  font-weight: 500;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.news-item:hover .news-title {
  color: #315efb;
}

.news-index {
  color: #999;
}

.news-item:nth-child(-n + 3) .news-index {
  color: #f60;
}

.news-title {
  font-size: 14px;
  color: #333;
}

/* 底部导航栏 */
.footer_container {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 20px 0;
}

.footer_container a {
  color: #999;
  text-decoration: none;
  margin: 0 10px;
}

.footer_container a:hover {
  color: #315efb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search_div,
  .hot-news {
    width: 90%;
  }

  .news-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>
